<template>
	<view>
		<!-- 头部信息 -->
		<j-header navigate="scene" @loadhandler="onLoadHandler" :deviceList="deviceList" :allDeviceList="allDeviceList"></j-header>
		<!-- tab内容 -->
		<view class="tabs">
			<scroll-view :scroll-x="true" class="tabs-handler">
				<!-- <text :class="'tabs-item ' + (tabname === 'mode' ? 'selected' : '')" @tap="onBindtapTab('mode')">模式</text> -->
				<text :class="'tabs-item ' + (tabname === 'scene' ? 'selected' : '')"
					@tap="onBindtapTab('scene')" style="color: #000;font-size: 16px">智能场景</text>
			</scroll-view>
			<!-- 模式 -->
			<view class="tabs-content" v-if="tabname === 'mode'">
				<template v-for="(item, index) in defaultSceneList">
					<j-cell-group :key="item.sceneId">
						<j-cell radius custom-prefix="false" :icon="item.iconValueEncode"
							:color="item.isEnable === 1 ? item.colorValue:'#C1E1DD'" :size="96"
							:sub-title="item.description" @jftap="onBindtapSceneList(item.sceneId)">
							<view slot="title" style="display: flex; align-items: center;">
								<text style="margin-right:10rpx;">{{item.sceneName}}</text>
								<text v-if="item.isEnable === 1"
									style="font-size: 16rpx;background: #18BC37;color: white;border-radius: 10rpx;padding: 0 10rpx;">开启中</text>
							</view>
						</j-cell>
					</j-cell-group>
				</template>
			</view>
			<!-- 智能场景 -->
			<view class="tabs-content" v-if="tabname === 'scene'" style="margin-top: 10rpx">
				<j-cell-group>
					<j-cell-card class='modeList cell-title2' title="手动场景" :is-touch="false" border :titleColor="'#999999'" fontSize="15" :more="(manuSceneList.length > 0)">
						<view slot="tips" class="noneList" v-if="manuSceneList.length <= 0" style="color:#999999;width: 85%;margin-right:15px;">空</view>
						<template v-for="(item, index) in manuSceneList">
							<view :key="item.sceneId" class="card-list-item">
								<j-cell-card :title="item.sceneName" style="height: 100rpx"
									@jfheadertap="onBindtapInfo(item.sceneId)" :stop-propagation="false"
									:is-touch="false" :is-show="false">
									<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx;width: 100%;">
										<image
											:src="invalid(item.invalid)?'https://statics.xmcsrv.net/weixin/loseEfficacy.png':item.iconValueEncode"
											lazy-load class="icon-lg"
											:style="{ background:  invalid(item.invalid) ? '' : item.colorValue,  borderRadius: invalid(item.invalid)?0:'100%',display: 'inline-block',verticalAlign: 'middle' }">
										</image>
										<view v-if="invalid(item.invalid)" class="loseEfficacy">已失效</view>
										<button v-else type="primary" plain size="mini" style="width: auto; margin: 0" @tap="oneClick(item)">执行</button>
									</view>
								</j-cell-card>
							</view>
						</template>
					</j-cell-card>
				</j-cell-group>
				<j-cell-group>
					<j-cell-card class='modeList' title="自动场景" :is-touch="false" border :titleColor="'#999999'" fontSize="15" :more="(autoSceneList.length > 0)">
						<view slot="tips" v-if="autoSceneList.length <= 0" class="noneList" style="color:#999999;width: 85%;margin-right:15px;">空</view>
						<template v-for="(item, index) in autoSceneList">
							<view :key="item.sceneId" class="card-list-item">
								<j-cell-card :title="item.sceneName" style="height: 100rpx"
									@jfheadertap="onBindtapInfo(item.sceneId)" :stop-propagation="false"
									:is-touch="false" :is-show="false">
									<view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx;width: 100%;">
										<image
											:src="invalid(item.invalid)?'https://statics.xmcsrv.net/weixin/loseEfficacy.png':item.iconValueEncode"
											lazy-load class="icon-lg"
											:style="{ background:  invalid(item.invalid) ? '' : item.colorValue,  borderRadius: invalid(item.invalid)?0:'100%',display: 'inline-block',verticalAlign: 'middle' }">
										</image>
										<view v-if="invalid(item.invalid)" class="loseEfficacy">已失效</view>
										<switch v-else :checked="item.isEnable === 1" color="#FF0025" @change="bindchange(item)"></switch>
									</view>
								</j-cell-card>
							</view>
						</template>
					</j-cell-card>
				</j-cell-group>
			</view>
		</view>
<!--        <view class="bottom-fixed" v-if="addShow">-->
<!--            <view @tap="onBindtapCreate">-->
<!--                <uni-icons custom-prefix="iconfont" type="icon-zengjia1" size="64" color="#FF0025"></uni-icons>-->
<!--                <view>点击"+"添加场景</view>-->
<!--            </view>-->
<!--        </view>-->
<!--		<j-doorbell ref="doorbellCall"></j-doorbell>-->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				sceneList: [],//场景列表
				defaultSceneList: [],// 默认场景
				manuSceneList: [],// 手动场景
				autoSceneList: [],// 自动场景
				tabname: 'scene', //'mode',
				isShowHandler: true,
				isShowAuto: true,
                addShow: false,
                allDeviceList: [],
                deviceList: [],
			};
		},
		onShow: function() {
			uni.showTabBar()
			this.onLoadHandler();
            this.allDeviceList = uni.getStorageSync('allDeviceList')
            this.deviceList = uni.getStorageSync('bossDeviceList')
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading();
			setTimeout(() => {
				this.onLoadHandler();
				uni.hideNavigationBarLoading();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
            onBindtapCreate() {
                uni.navigateTo({
                    url: '/jvss/pagesScene/scene-create/scene-create'
                });
            },
			invalid(e) {
				return e == 1 || e == 2 || e == 3
			},
			/** ======================== emit事件 ================================ */
			// 获取场景列表之前，必须先获取当前家庭组
			// 初始化页面时，会执行这个函数
			onLoadHandler(ev) {
				this.getSceneList();
			},
			// 查询场景列表
			getSceneList() {
				const data = {
					groupId: uni.getStorageSync('currentGroupId') // getApp().globalData.currentGroupId
				};
				getApp().globalData.api.getSceneList(data, (result) => {
					result.forEach((item) => {
						item.iconValueEncode =
							`${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${item.iconValue}`;
					});
					this.sceneList = result
					this.defaultSceneList = []
					this.manuSceneList = []
					this.autoSceneList = []
					this.sceneList.forEach(item => {
						if (item.isDefault === 1) {
							this.defaultSceneList.push(item)
						}
						if (item.isDefault === 0 && item.sceneType == 0) {
							this.manuSceneList.push(item)
						}
						if (item.isDefault === 0 && item.sceneType == 1) {
							this.autoSceneList.push(item)
						}
					})
                    if(this.manuSceneList.length || this.autoSceneList.length) {
                        this.addShow = false
                    } else {
                        this.addShow = true
                    }
				});
			},
			// 模式（样式定位）
			onBindtapTab(ev) {
				let name = ev
				if (name === 'mode') {
					this.tabname = 'mode'
				} else {
					this.tabname = 'scene'
				}
			},
			// //智能场景--手动
			// onBindtapShowHandler() {
			//     this.isShowHandler = !this.isShowHandler
			// },

			// // 智能场景--自动
			// onBindtapShowAuto() {
			//     this.isShowAuto = !this.isShowAuto
			// },
			
			// 具体场景
			onBindtapSceneList(sceneId) {
				uni.navigateTo({
					url: `/jvss/pagesScene/scene-create/scene-create?sceneId=${sceneId}`
				});
			},
			// 跳转查看场景
			onBindtapInfo(sceneId) {
				console.log('跳转查看场景:', sceneId);
				uni.navigateTo({
					url: `/jvss/pagesScene/scene-create/scene-create?sceneId=${sceneId}`
				});
			},
			// 一键执行场景
			oneClick(ev) {
				let scene = ev
				const data = {
					sceneId: scene.sceneId
				};
				getApp().globalData.api.oneClick(data, (result) => {
					uni.showToast({
						title: `执行成功！`
					});
				});
			},

			// 开启/停用场景
			bindchange(ev) {
				let scene = ev
				if (scene.isEnable === 0) {
					this.startScene(scene.sceneId); // 开启
				} else {
					this.stopScene(scene.sceneId); // 停用
				}
			},
			// 开启场景
			startScene(sceneId) {
				getApp().globalData.api.startScene({
						sceneId: sceneId
					},
					(result) => {
						console.log('开启场景:', result);
					}
				);
			},
			// 停用场景
			stopScene(sceneId) {
				getApp().globalData.api.stopScene({
						sceneId: sceneId
					},
					(result) => {
						console.log('停用场景:', result);
					}
				);
			}
		}
	};
</script>
<style lang="scss">
	.tabs {
		margin-top: 80rpx;
	}

	.tabs-handler {
		line-height: 72rpx;
        color: #000;
		white-space: nowrap;
		width: calc(100vw - 40rpx);
		margin: 0 20rpx;
	}

	.tabs-handler .selected {
		color: #FF0025;
		font-weight: bold;
	}

	.loseEfficacy {
		color: #FF4848;
		font-size: 24rpx;
	}

	.tabs-item {
		padding-right: 40rpx;
	}

	.tabs-content {
		position: relative;
	}

	.tabs-content-item {
		margin: 20rpx;
		background: #ffffff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/deep/.modeList {
		.card-list {
			width: auto;
			position: relative;
			overflow: hidden;
		}

		.cell-left {
			width: 70%;
		}

		.cell {
			background: transparent !important;
		}

		.cell-headline {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.cell-header {
			background: #ffffff;
		}

		.cell-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.card-list-item {
			float: left;
			display: inline;
			width: calc(50% - 10rpx);
			margin: 20rpx 0 0 0rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			overflow: hidden;
		}
	}
	.noneList{
		font-size:26rpx;
	}
	.rotate {
		transform: rotate(90deg);
		transition: all 200ms;
	}
	.rotate.actived {
		transform: rotate(0deg);
		transition: all 200ms;
	}
    /deep/.cell-group-item2 {
        padding: 0 !important;
    }
    /deep/.cell2 {
        border-radius: 10px !important;
    }
</style>
